<!--
  功能：考试详情
  作者：licy
  邮箱：licy@briup.com
  时间：2021年02月02日 15:48:33
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class='exam_details'>
    <div class="page_header">
      <el-page-header @back="goBack" :content="exam.name"></el-page-header>
    </div>
    <div>
      <div class="info">
        <div class="label">考试时间</div>
        <div class="val"> {{exam.beginTime | fmtTime}} ~ {{exam.endTime |fmtTime}} </div>
      </div>
      <div class="info">
        <div class="label">状态</div>
        <div class="val">
          <el-tag size="mini" v-if="exam.beginTime > new Date().getTime()">未开始</el-tag>
          <el-tag size="mini" v-else-if="exam.endTime < new Date().getTime()">已结束</el-tag>
          <el-tag size="mini" v-else>考试中</el-tag>
        </div>
      </div>
      <div class="info">
        <div class="label">学生人数</div>
        <div class="val"> {{exam.numStudent}} </div>
      </div>
      <div class="info">
        <div class="label">创建时间</div>
        <div class="val"> {{exam.createTime | fmtDate}} </div>
      </div>
      <div class="info">
        <div class="label">考试试卷</div>
        <div class="val"> {{exam.paper?exam.paper.name:""}} </div>
      </div>
      <div class="info">
        <div class="label">参与班级</div>
        <div class="val"> {{exam.clazzes?exam.clazzes.map(item=> item.name).join():''}} </div>
      </div>
      <div class="info">
        <div class="label">阅卷老师</div>
        <div class="val"> {{exam.professors?exam.professors.map(item => item.realname).join():''}} </div>
      </div>
    </div>
    <div class="paper_content">
     <div class="paper" v-if="exam.paper != null">
       <h2 style="text-align:center">{{exam.name}}</h2>
        <ul class="question_list">
          <!-- 题目 -->
          <li class="question" v-for="(question,index) in currentPaper.questions" :key="question.id">
            <!-- 题干 -->
            <div class="title">
              <span>{{index + 1}}、</span>
              <el-tag type="primary" v-if="question.type == '单选'">{{question.type}}</el-tag> 
              <el-tag type="warning" v-else-if="question.type == '多选'">{{question.type}}</el-tag> 
              <el-tag type="danger" v-else-if="question.type == '判选'">{{question.type}}</el-tag> 
              <el-tag type="info" v-else>{{question.type}}</el-tag> 
              <el-tag size="mini" type="info"> {{question.questionScore}} 分</el-tag>
              <div v-html="question.name"></div>
            </div>
            <div class="question_content">
              <!-- 选项 -->
              <!-- 单选 -->
              <div class="options" v-if="question.type == '单选'">
                <el-radio-group v-model="question.answer">
                  <el-radio  v-for="option in question.options" :key="option.id" :label="option.id">{{option.name}}</el-radio>
                </el-radio-group>
              </div>
              <!-- 多选 -->
              <div class="options" v-if="question.type == '多选'">
                <el-checkbox-group v-model="question.answer">
                  <el-checkbox  v-for="option in question.options" :key="option.id"  :label="option.id">
                    {{option.name}}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
              <!-- 判断 -->
              <div v-if="question.type=='判断'">
                <el-radio-group v-model="question.answer">
                  <el-radio :label="true"><i class="el-icon-check"></i></el-radio>
                  <el-radio :label="false"><i class="el-icon-close"></i></el-radio>
                </el-radio-group>
              </div>
              <!-- 问答 -->
              <div v-if="question.type == '问答'">
                <el-input type="textarea" :rows="4"></el-input>
              </div>
               <!-- 答案解析 -->
              <div style="color:#4fbc8d" v-html="question.analysis"> </div>
            </div>
          </li>
        </ul>
      </div>
      </div>
  </div>
</template>

<script>
import {get,post} from '@/utils/request'
import _ from 'lodash'
export default {
  // 组件名称
  name: 'demo',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
   return {
     pageTitle:"",
     exam:{},
   }
  },
  // 计算属性
  computed: {
    currentPaper(){
      let paper = _.cloneDeep(this.exam.paper);
      for(let question of paper.questions){
         switch(question.type){
          case "单选":
            question.answer = +question.answer;
            break;
          case "多选":
            let answers = question.answer.split(",")
            let arr = [];
            for(let a of answers){
              arr.push(+a)
            }
            question.answer = arr;
            break;
          default:
            break;
        }
      }
      return paper;
    }
  },
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    goBack(){
      this.$router.go(-1);
    },
    // 加载考试详情
    loadExamDetails(){
      let id = this.$route.query.id;
      let url = "/exam/exam/queryById"
      get(url,{id}).then(resp => {
        let exam = resp.data;
        this.exam = this.handleExamQuestions(exam);
      })
    },
    handleExamQuestions(exam){
      for(let question of exam.paper.questions){
        if(question.type === '多选'){
          question.answers = []
        }
      }
      return exam;
    }

  },
  // 以下是生命周期钩子
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () {
    this.loadExamDetails();
  },
  /**
  * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
  */
  mounted () {
  },
  /**
  * 实例销毁之前调用。在这一步，实例仍然完全可用。
  */
  beforeDestroy () {
  },
  /**
  * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
  * 所有的事件监听器会被移除，所有的子实例也会被销毁。
  */
  destroyed () {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped lang="scss">
.exam_details {
  
  .info {
    line-height: 2em;
    display: flex;
  }
  .info > .label {
    padding: 0 .5em;
    width: 100px;
    font-weight: bold;
    text-align: right;
  }
  .info > .label::after{
    content: "：";
  }
  .info > .val {
    flex: 1;
  }
}

.paper_content {
    background-color: #f4f4f4;
    padding: 2em 0;
  }

  .paper {
    background-color: #ffffff;
    width: 80%;
    margin: 0 auto;
    padding: 1em;
    border-radius: 10px;
    min-height: 600px;
    
    .question {
      .question_content {
        padding: 1em 0 1em 2em;
      }
      .options {
        padding:.5em 0;
        & >div {
          line-height: 1.5em;
        }
      }

      .analysis {
        font-size: 10px;
        color: red;
        padding: 1em 1em;
      }
    }
  
}
</style>
